<script setup>
import MapChart from "@/components/myChart/MapChart.vue"
import PieChart from "@/components/myChart/PieChart.vue"
import LineChart1 from "@/components/myChart/VisitChart.vue"
import OnlineChart from "@/components/myChart/OnlineChart.vue"
import BarChart from "@/components/myChart/TagChart.vue"
import IncreaseChart from "@/components/myChart/IncreaseChart.vue";
import ArticleChart from "@/components/myChart/ArticleChart.vue";


</script>
<template>
  <el-row :gutter="5">
    <el-col :span="4" >
      <el-card>
        <div style="float: left">
          <div style="font-size: 30px">12</div>
          <el-tag type="primary" style="margin-bottom: 10px">用户总数</el-tag>
        </div>
        <div style="float: right">
          <el-icon size="65" color="#84d2ff"><UserFilled /></el-icon>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card>
        <div style="float: left">
          <div style="font-size: 30px">0</div>
          <el-tag type="warning" style="margin-bottom: 10px">在线总数</el-tag>
        </div>
        <div style="float: right">
          <el-icon size="65" color="#abb2b9"><Iphone /></el-icon>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card>
        <div style="float: left">
          <div style="font-size: 30px">8657</div>
          <el-tag type="success" style="margin-bottom: 10px">poi 总数</el-tag>
        </div>
        <div style="float: right">
          <el-icon size="65" color="#3498db"><MapLocation /></el-icon>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card>
        <div style="float: left">
          <div style="font-size: 30px">7</div>
          <el-tag type="info" style="margin-bottom: 10px">文章总数</el-tag>
        </div>
        <div style="float: right">
          <el-icon size="65" color="#33edd4"><Document /></el-icon>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card>
        <div style="float: left">
          <div style="font-size: 30px">6</div>
          <el-tag type="warning" style="margin-bottom: 10px">标签总数</el-tag>
        </div>
        <div style="float: right">
          <el-icon size="65" color="black"><PriceTag /></el-icon>
        </div>
      </el-card>
    </el-col>
    <el-col :span="4">
      <el-card>
        <div style="float: left">
          <div style="font-size: 30px">4</div>
          <el-tag type="danger" style="margin-bottom: 10px">评论总数</el-tag>
        </div>
        <div style="float: right">
          <el-icon size="65" color="#21618c"><ChatLineSquare /></el-icon>
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="5" style="margin-top: 10px">
    <el-col :span="8">
      <el-card header="性别比例">
        <PieChart></PieChart>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card header="用户分布">
        <div style="border: 1px solid #c4bfbf; ">
          <MapChart />
        </div>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="5" style="margin-top: 5px">
    <el-col :span="12">
      <el-card>
        <el-tabs type="border-card">
          <el-tab-pane label="访问量">
            <LineChart1 />
          </el-tab-pane>
          <el-tab-pane label="在线数">
            <OnlineChart />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card header="用户新增">
        <IncreaseChart/>
      </el-card>
    </el-col>
  </el-row>
  <el-row :gutter="5" style="margin-top: 5px">
    <el-col :span="12">
      <el-card header="文章数量">
        <ArticleChart />
      </el-card>
    </el-col>
    <el-col :span="12">
      <el-card header="标签数量">
        <BarChart />
      </el-card>
    </el-col>
  </el-row>
</template>

